<template>
  <table style="background-color: rgb(221, 235, 247)">
    <thead>
      <tr>
        <td rowspan="2" style="width: 100px">名称</td>
        <td rowspan="2" style="width: 120px">单位</td>
        <td colspan="13">{{ title }}-实物量（总能耗）</td>
      </tr>
      <tr>
        <td>1月</td>
        <td>2月</td>
        <td>3月</td>
        <td>4月</td>
        <td>5月</td>
        <td>6月</td>
        <td>7月</td>
        <td>8月</td>
        <td>9月</td>
        <td>10月</td>
        <td>11月</td>
        <td>12月</td>
        <td>合计</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(o, i) in state.list">
        <td>{{ o.name }}</td>
        <td>{{ o.unit }}</td>
        <td v-for="(month, j) in o.months">
          <a-input-number
            v-if="edit"
            :value="month"
            :controls="false"
            :precision="
              state.currentInput[0] === i && state.currentInput[1] === j
                ? undefined
                : 2
            "
            @focus="
              () => {
                state.currentInput = [i, j];
              }
            "
            @change="onMonthChange"
          />
          <template v-else>{{ month.toFixed(2) }}</template>
        </td>
        <td>{{ _.sum(o.months).toFixed(2) }}</td>
      </tr>
    </tbody>
  </table>
  <table style="background-color: rgb(252, 228, 214)">
    <thead>
      <tr>
        <td rowspan="2" style="width: 100px">能源品种</td>
        <td rowspan="2" style="width: 120px">碳排放因子</td>
        <td colspan="13">{{ title }}-碳排放量（t）</td>
      </tr>
      <tr>
        <td>1月</td>
        <td>2月</td>
        <td>3月</td>
        <td>4月</td>
        <td>5月</td>
        <td>6月</td>
        <td>7月</td>
        <td>8月</td>
        <td>9月</td>
        <td>10月</td>
        <td>11月</td>
        <td>12月</td>
        <td>合计</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(o, i) in _.filter(state.list, (o) => o.name != '总产值')">
        <td>{{ o.name }}</td>
        <td>
          <!-- <a-input-number
            v-if="edit"
            :value="o.factor"
            :controls="false"
            @change="
              (v) => {
                onFactorChange(i, v);
              }
            "
          />
          <template v-else>{{ o.factor }}</template> -->
          {{ o.factor }}
        </td>
        <td v-for="month in o.months">
          {{ month ? (month * o.factor * o.ratio).toFixed(3) : "-" }}
        </td>
        <td>
          {{
            _.sum(
              _.map(o.months, (month) => month * o.factor * o.ratio)
            ).toFixed(3)
          }}
        </td>
      </tr>
      <template v-if="state.list.length">
        <tr style="height: 41px">
          <td colspan="2">碳排放量(因子指标)(t)</td>
          <td v-for="(_, index) in state.list[0].months">
            {{ computedFactor(index) }}
          </td>
          <td>{{ factorAll }}</td>
        </tr>
        <template v-if="title === '孖洲岛'">
          <tr style="height: 41px; background-color: rgb(255, 242, 204)">
            <td colspan="2">{{ factorCategory[14] }}</td>
            <td v-for="(_, index) in state.list[0].months">
              {{ (ri / 12).toFixed(3) }}
            </td>
            <td>{{ ri }}</td>
          </tr>
          <tr style="height: 41px; background-color: rgb(221, 235, 247)">
            <td colspan="2">碳排放强度(因子指标)(t/万元)</td>
            <td
              v-for="(_, index) in state.list[0].months"
              :style="{
                'background-color':
                  computedStrong(index) > ri_a ? '#e9a4a4' : null,
              }"
            >
              {{ computedStrong(index) }}
            </td>
            <td>{{ strongAll }}</td>
          </tr>
          <tr style="height: 41px; background-color: rgb(255, 242, 204)">
            <td colspan="2">{{ factorCategory[15] }}(t/万元)</td>
            <td v-for="(_, index) in state.list[0].months">{{ ri_a }}</td>
            <td>{{ ri_a }}</td>
          </tr>
        </template>
      </template>
    </tbody>
  </table>
</template>
<script setup>
import {
  getCurrentInstance,
  reactive,
  ref,
  onMounted,
  watch,
  computed,
} from "vue";
import _ from "lodash";
import { factorCategory } from "@/utils/source";

const { proxy } = getCurrentInstance();
const props = defineProps(["title", "source", "edit", "ri", "ri_a"]);
const emits = defineEmits(["update:source"]);

const state = reactive({
  list: props.source || [],
  currentInput: [-1, -1],
});

watch(
  () => props.source,
  (v) => {
    state.list = v;
  }
);

const onMonthChange = (v) => {
  const _list = [...state.list];
  const row = _list[state.currentInput[0]];
  if (row) {
    row.months[state.currentInput[1]] = v;
  }
  state.list = _list;
};

const onFactorChange = (i, v) => {
  const _list = [...state.list];
  _list[i].factor = v;
  state.list = _list;
};

watch(
  () => state.list,
  (v) => {
    // 更新
    emits("update:source", v);
  },
  { deep: true }
);

// 计算碳排量
const computedFactor = (index) => {
  const list = _.filter(state.list, (o) => o.name !== "总产值");
  const total = _.sum(
    _.map(list, (obj) => {
      return obj.months[index] * obj.factor * obj.ratio;
    })
  );
  return total ? total.toFixed(3) : "-";
};

// 总碳排量
const factorAll = computed(() => {
  const list = _.filter(state.list, (o) => o.name !== "总产值");
  const all = [];
  _.each(list, (o) => {
    _.each(o.months, (month) => {
      all.push(month * o.factor * o.ratio);
    });
  });
  const total = _.sum(all);
  return total ? total.toFixed(3) : "-";
});

// 计算碳排强度
const computedStrong = (index) => {
  const list = _.filter(state.list, (o) => o.name !== "总产值");
  const total = _.sum(
    _.map(list, (obj) => {
      return obj.months[index] * obj.factor * obj.ratio;
    })
  );

  let ratio = 0;
  const one = _.find(state.list, (o) => o.name === "总产值");
  if (one) {
    const money = one.months[index];
    ratio = total / money;
  }
  return ratio ? ratio.toFixed(3) : "-";
};

const strongAll = computed(() => {
  const list = _.filter(state.list, (o) => o.name !== "总产值");
  const all = [];
  _.each(list, (o) => {
    _.each(o.months, (month) => {
      all.push(month * o.factor * o.ratio);
    });
  });
  const total = _.sum(all);

  let ratio = 0;
  const one = _.find(state.list, (o) => o.name === "总产值");
  if (one) {
    const money = _.sum(one.months);
    ratio = total / money;
  }
  return ratio ? ratio.toFixed(3) : "-";
});
</script>
<style lang="less" scoped>
table {
  width: 100%;
  margin: 4px;
  color: #000;
}

th,
td {
  border: 1px solid #000;
  text-align: center;
  padding: 4px;
  width: 85.8px;
}

:deep(.ant-input-number) {
  color: #000;
  font-size: 12px;
  width: 100%;

  input {
    text-align: right;
  }
}
</style>
